<template>
  <div class="detail-info">
    <el-descriptions title="需求详情" :column="2" border>
      <el-descriptions-item label="迭代版本" :span="2">
        {{ task.extend?.iterativeVersion || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="推荐前端开发" :span="2">
        <div>
          <span>{{ task.extend?.frontEndDeveloper?.name || "-" }}</span>
          <div>
            <template v-if="task.extend?.frontEndDeveloper?.expertise">
              <el-tag
                v-for="(skill, index) in task.extend.frontEndDeveloper
                  .expertise"
                :key="index"
                class="ml-2 mt-1"
                size="small"
                type="success"
              >
                {{ skill }}
              </el-tag>
            </template>
            <template v-if="task.extend.frontEndDeveloper.technologyStack">
              <el-tag
                v-for="(tech, techIndex) in task.extend.frontEndDeveloper
                  .technologyStack"
                :key="'tech-' + techIndex"
                class="ml-2 mt-1"
                size="small"
                type="danger"
              >
                {{ tech }}
              </el-tag>
            </template>
            <template v-if="task.extend.frontEndDeveloper.level">
              <el-tag class="ml-2 mt-1" size="small" type="primary">
                {{ task.extend.frontEndDeveloper.level }}
              </el-tag>
            </template>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="推荐后端开发" :span="2">
        <div>
          <span>{{ task.extend?.backEndDeveloper?.name || "-" }}</span>
          <div>
            <template v-if="task.extend?.backEndDeveloper?.expertise">
              <el-tag
                v-for="(skill, index) in task.extend.backEndDeveloper.expertise"
                :key="index"
                class="ml-2 mt-1"
                size="small"
                type="success"
              >
                {{ skill }}
              </el-tag>
            </template>

            <template v-if="task.extend.backEndDeveloper.technologyStack">
              <el-tag
                v-for="(tech, techIndex) in task.extend.backEndDeveloper
                  .technologyStack"
                :key="'tech-' + techIndex"
                class="ml-2 mt-1"
                size="small"
                type="danger"
              >
                {{ tech }}
              </el-tag>
            </template>
            <template v-if="task.extend.backEndDeveloper.level">
              <el-tag class="ml-2 mt-1" size="small" type="primary">
                {{ task.extend.backEndDeveloper.level }}
              </el-tag>
            </template>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="任务列表" :span="2">
        <el-table
          :data="task.extend?.newDemands || []"
          border
          size="small"
          style="margin-top: 10px"
        >
          <el-table-column
            prop="demandName"
            label="任务名称"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="demandDescription"
            label="描述"
            min-width="180"
          ></el-table-column>
          <el-table-column prop="difficulty" label="难度" width="60">
            <template #default="scope">
              <el-tag
                :type="getDifficultyType(scope.row.difficulty)"
                size="small"
              >
                {{ scope.row.difficulty }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="expectedTime"
            label="预计时间"
            width="80"
          ></el-table-column>
          <el-table-column label="前端开发" width="100">
            <template #default="scope">
              <div>
                <div>{{ scope.row.frontEndDeveloper || "-" }}</div>
                <div v-if="scope.row.frontEndDeveloperInfo?.expertise?.length">
                  <el-tag
                    v-for="(skill, index) in scope.row.frontEndDeveloperInfo
                      .expertise"
                    :key="index"
                    size="small"
                    type="success"
                    style="margin: 2px"
                  >
                    {{ skill }}
                  </el-tag>
                  <div
                    v-if="
                      scope.row.frontEndDeveloperInfo.technologyStack &&
                      scope.row.frontEndDeveloperInfo.technologyStack.length
                    "
                  >
                    <el-tag
                      v-for="(tech, techIndex) in scope.row
                        .frontEndDeveloperInfo.technologyStack"
                      :key="'tech-' + techIndex"
                      size="small"
                      type="danger"
                      style="margin: 2px"
                    >
                      {{ tech }}
                    </el-tag>
                  </div>
                  <div v-if="scope.row.frontEndDeveloperInfo.level">
                    <el-tag size="small" type="primary" style="margin: 2px">
                      {{ scope.row.frontEndDeveloperInfo.level }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="后端开发" width="100">
            <template #default="scope">
              <div>
                <div>{{ scope.row.backEndDeveloper || "-" }}</div>
                <div v-if="scope.row.backEndDeveloperInfo?.expertise?.length">
                  <el-tag
                    v-for="(skill, index) in scope.row.backEndDeveloperInfo
                      .expertise"
                    :key="index"
                    size="small"
                    type="info"
                    style="margin: 2px"
                  >
                    {{ skill }}
                  </el-tag>
                  <div
                    v-if="
                      scope.row.backEndDeveloperInfo.technologyStack &&
                      scope.row.backEndDeveloperInfo.technologyStack.length
                    "
                  >
                    <el-tag
                      v-for="(tech, techIndex) in scope.row.backEndDeveloperInfo
                        .technologyStack"
                      :key="'tech-' + techIndex"
                      size="small"
                      type="danger"
                      style="margin: 2px"
                    >
                      {{ tech }}
                    </el-tag>
                  </div>
                  <div v-if="scope.row.backEndDeveloperInfo.level">
                    <el-tag size="small" type="primary" style="margin: 2px">
                      {{ scope.row.backEndDeveloperInfo.level }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="时间范围" width="180">
            <template #default="scope">
              <div>
                {{ formatDate(scope.row.startTime) || "未设置" }} 至
                {{ formatDate(scope.row.endTime) || "未设置" }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  task: {
    type: Object,
    required: true,
  },
});

// 格式化日期为yyyy-MM-dd
const formatDate = (dateString) => {
  if (!dateString) return "未设置";

  try {
    const date = new Date(dateString);
    if (isNaN(date.getTime())) return dateString; // 如果无法解析为日期，返回原字符串

    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");

    return `${year}-${month}-${day}`;
  } catch (error) {
    console.error("日期格式化错误:", error);
    return dateString;
  }
};

// 获取难度对应的标签类型
const getDifficultyType = (difficulty) => {
  switch (difficulty) {
    case "高":
      return "danger";
    case "中":
      return "warning";
    case "低":
      return "success";
    default:
      return "info";
  }
};
</script>

<style scoped lang="scss">
.detail-info {
  padding: 16px;
  background-color: #f8f8f8;

  .ml-2 {
    margin-left: 8px;
  }

  .mt-1 {
    margin-top: 4px;
  }

  // 添加 Descriptions 标签样式
  :deep(.el-descriptions__label) {
    min-width: 120px;
    width: 120px;
  }

  :deep(.el-descriptions__content) {
    word-break: break-word;
  }
}
</style>
